<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
    <head>
        <!-- 页面meta -->
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Java2019-C190708</title>

        <!-- Tell the browser to be responsive to screen width -->
        <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">

        <link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/bootstrap/css/bootstrap.min.css">
        <link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/font-awesome/css/font-awesome.min.css">
        <link rel="stylesheet"
              href="${pageContext.request.contextPath}/plugins/ionicons/css/ionicons.min.css">
        <link rel="stylesheet"
              href="${pageContext.request.contextPath}/plugins/iCheck/square/blue.css">
        <link rel="stylesheet"
              href="${pageContext.request.contextPath}/plugins/morris/morris.css">
        <link rel="stylesheet"
              href="${pageContext.request.contextPath}/plugins/jvectormap/jquery-jvectormap-1.2.2.css">
        <link rel="stylesheet"
              href="${pageContext.request.contextPath}/plugins/datepicker/datepicker3.css">
        <link rel="stylesheet"
              href="${pageContext.request.contextPath}/plugins/daterangepicker/daterangepicker.css">
        <link rel="stylesheet"
              href="${pageContext.request.contextPath}/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">
        <link rel="stylesheet"
              href="${pageContext.request.contextPath}/plugins/datatables/dataTables.bootstrap.css">
        <link rel="stylesheet"
              href="${pageContext.request.contextPath}/plugins/treeTable/jquery.treetable.css">
        <link rel="stylesheet"
              href="${pageContext.request.contextPath}/plugins/treeTable/jquery.treetable.theme.default.css">
        <link rel="stylesheet"
              href="${pageContext.request.contextPath}/plugins/select2/select2.css">
        <link rel="stylesheet"
              href="${pageContext.request.contextPath}/plugins/colorpicker/bootstrap-colorpicker.min.css">
        <link rel="stylesheet"
              href="${pageContext.request.contextPath}/plugins/bootstrap-markdown/css/bootstrap-markdown.min.css">
        <link rel="stylesheet"
              href="${pageContext.request.contextPath}/plugins/adminLTE/css/AdminLTE.css">
        <link rel="stylesheet"
              href="${pageContext.request.contextPath}/plugins/adminLTE/css/skins/_all-skins.min.css">
        <link rel="stylesheet"
              href="${pageContext.request.contextPath}/css/style.css">
        <link rel="stylesheet"
              href="${pageContext.request.contextPath}/plugins/ionslider/ion.rangeSlider.css">
        <link rel="stylesheet"
              href="${pageContext.request.contextPath}/plugins/ionslider/ion.rangeSlider.skinNice.css">
        <link rel="stylesheet"
              href="${pageContext.request.contextPath}/plugins/bootstrap-slider/slider.css">
        <link rel="stylesheet"
              href="${pageContext.request.contextPath}/plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.css">
    </head>

    <body class="hold-transition skin-purple sidebar-mini">

        <div class="wrapper">

            <!-- 内容区域 -->
            <div class="content-wrapper" style="margin-left: 0px">

                <!-- 内容头部 -->
                <section class="content-header">
                    <h1>
                        采购管理 <small>采购商品</small>
                    </h1>
                    <ol class="breadcrumb">
                        <li><a href="${pageContext.request.contextPath}/index.html">
                            <i class="fa fa-dashboard"></i> 首页</a></li>
                        <li><a href="${pageContext.request.contextPath}/user/userManagement">采购管理</a></li>
                        <li class="active">采购商品</li>
                    </ol>
                </section>
                <!-- 内容头部 /-->

                    <!-- 正文区域 -->
                    <section class="content">
                        <!--产品信息-->
                        <div class="panel panel-default">
                            <div class="panel-heading">订单信息</div>
                            <div>
                                <div class="btn btn-outline-warning">供应商</div>
                                <div>
                                    <select id="pName" class="btn btn-outline-warning">
                                        <option>
                                            请选择
                                        </option>
                                        <c:forEach items="${list}" var="pur">
                                            <option>
                                                ${pur.providerName}
                                            </option>
                                        </c:forEach>
                                    </select>
                                </div>
                                <br>
                                <button type="button" class="btn btn-outline-warning" id="addBy">添加商品</button>
                                <button type="button" class="btn btn-outline-light">删除</button>
                                <br>
                                <table class="table" id="Tab">
                                    <thead class="thead-dark">
                                    <tr>
                                        <th scope="col">#</th>
                                        <th scope="col">商品</th>
                                        <th scope="col">当前库存</th>
                                        <th scope="col" align="center">购买数量</th>
                                        <th scope="col">单价</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <div>
                                    <tr>
                                        <th scope="row">1</th>
                                        <td>
                                            <select id="seLe" class="btn btn-outline-warning">
                                                <option>请选择</option>
                                            </select>
                                        </td>
                                        <td id="num">0</td>
                                        <td><input class="btn btn-outline-warning" id="numG" value="0"></td>
                                        <td id="purPrice">0</td>
                                    </tr>
                                    </div>
                                    <div id="div2">

                                    </div>
                                    </tbody>
                                </table>
<%--                                <div class="col-md-2 title">商品</div>--%>
<%--                                <div class="col-md-4 data">--%>
<%--                                    <select class="form-control" id="seLe">--%>
<%--                                        <option>--%>
<%--                                            请选择--%>
<%--                                        </option>--%>
<%--                                    </select>--%>
<%--                                </div>--%>
<%--                                <div class="col-md-2 title">数量</div>--%>
<%--                                <div class="col-md-4 data">--%>
<%--                                    <input class="form-control" type="text">--%>
<%--                                </div>--%>
                                <div>&nbsp;&nbsp;支付方式</div>
                                <div>
                                    &nbsp;&nbsp;<input type="checkbox" id="weiXin" name="ByWay" onclick="choose(this)">微信
                                    <input type="checkbox" value="支付宝" name="ByWay" onclick="choose(this)">支付宝
                                    <input type="checkbox" value="现金" name="ByWay" onclick="choose(this)">现金
                                </div>
                                <br>
                                <br>
                            </div>
                        </div>
                        <!--订单信息/-->
                        <!--工具栏-->
                        <div class="box-tools text-center">
                            <button class="btn bg-maroon" id="AddTwo">保存</button>
                            <button type="button" class="btn bg-default" onclick="history.back(-1);">返回</button>
                        </div>
                        <!--工具栏/-->
                    </section>
                    <!-- 正文区域 /-->
            </div>
            <!-- 内容区域 /-->

        </div>

        <script
                src="${pageContext.request.contextPath}/plugins/jQuery/jquery-2.2.3.min.js"></script>
        <script
                src="${pageContext.request.contextPath}/plugins/jQueryUI/jquery-ui.min.js"></script>
        <script>
            $.widget.bridge('uibutton', $.ui.button);
        </script>
        <script
                src="${pageContext.request.contextPath}/plugins/bootstrap/js/bootstrap.min.js"></script>
        <script
                src="${pageContext.request.contextPath}/plugins/raphael/raphael-min.js"></script>
        <script
                src="${pageContext.request.contextPath}/plugins/morris/morris.min.js"></script>
        <script
                src="${pageContext.request.contextPath}/plugins/sparkline/jquery.sparkline.min.js"></script>
        <script
                src="${pageContext.request.contextPath}/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
        <script
                src="${pageContext.request.contextPath}/plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
        <script
                src="${pageContext.request.contextPath}/plugins/knob/jquery.knob.js"></script>
        <script
                src="${pageContext.request.contextPath}/plugins/daterangepicker/moment.min.js"></script>
        <script
                src="${pageContext.request.contextPath}/plugins/daterangepicker/daterangepicker.js"></script>
        <script
                src="${pageContext.request.contextPath}/plugins/daterangepicker/daterangepicker.zh-CN.js"></script>
        <script
                src="${pageContext.request.contextPath}/plugins/datepicker/bootstrap-datepicker.js"></script>
        <script
                src="${pageContext.request.contextPath}/plugins/datepicker/locales/bootstrap-datepicker.zh-CN.js"></script>
        <script
                src="${pageContext.request.contextPath}/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script>
        <script
                src="${pageContext.request.contextPath}/plugins/slimScroll/jquery.slimscroll.min.js"></script>
        <script
                src="${pageContext.request.contextPath}/plugins/fastclick/fastclick.js"></script>
        <script
                src="${pageContext.request.contextPath}/plugins/iCheck/icheck.min.js"></script>
        <script
                src="${pageContext.request.contextPath}/plugins/adminLTE/js/app.min.js"></script>
        <script
                src="${pageContext.request.contextPath}/plugins/treeTable/jquery.treetable.js"></script>
        <script
                src="${pageContext.request.contextPath}/plugins/select2/select2.full.min.js"></script>
        <script
                src="${pageContext.request.contextPath}/plugins/colorpicker/bootstrap-colorpicker.min.js"></script>
        <script
                src="${pageContext.request.contextPath}/plugins/bootstrap-wysihtml5/bootstrap-wysihtml5.zh-CN.js"></script>
        <script
                src="${pageContext.request.contextPath}/plugins/bootstrap-markdown/js/bootstrap-markdown.js"></script>
        <script
                src="${pageContext.request.contextPath}/plugins/bootstrap-markdown/locale/bootstrap-markdown.zh.js"></script>
        <script
                src="${pageContext.request.contextPath}/plugins/bootstrap-markdown/js/markdown.js"></script>
        <script
                src="${pageContext.request.contextPath}/plugins/bootstrap-markdown/js/to-markdown.js"></script>
        <script
                src="${pageContext.request.contextPath}/plugins/ckeditor/ckeditor.js"></script>
        <script
                src="${pageContext.request.contextPath}/plugins/input-mask/jquery.inputmask.js"></script>
        <script
                src="${pageContext.request.contextPath}/plugins/input-mask/jquery.inputmask.date.extensions.js"></script>
        <script
                src="${pageContext.request.contextPath}/plugins/input-mask/jquery.inputmask.extensions.js"></script>
        <script
                src="${pageContext.request.contextPath}/plugins/datatables/jquery.dataTables.min.js"></script>
        <script
                src="${pageContext.request.contextPath}/plugins/datatables/dataTables.bootstrap.min.js"></script>
        <script
                src="${pageContext.request.contextPath}/plugins/chartjs/Chart.min.js"></script>
        <script
                src="${pageContext.request.contextPath}/plugins/flot/jquery.flot.min.js"></script>
        <script
                src="${pageContext.request.contextPath}/plugins/flot/jquery.flot.resize.min.js"></script>
        <script
                src="${pageContext.request.contextPath}/plugins/flot/jquery.flot.pie.min.js"></script>
        <script
                src="${pageContext.request.contextPath}/plugins/flot/jquery.flot.categories.min.js"></script>
        <script
                src="${pageContext.request.contextPath}/plugins/ionslider/ion.rangeSlider.min.js"></script>
        <script
                src="${pageContext.request.contextPath}/plugins/bootstrap-slider/bootstrap-slider.js"></script>
        <script
                src="${pageContext.request.contextPath}/plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.min.js"></script>

        <script type="text/javascript">
            $(document).ready(function () {
                // 选择框
                $(".select2").select2();

                // WYSIHTML5编辑器
                $(".textarea").wysihtml5({
                    locale: 'zh-CN'
                });

                $("#pName").change(function () {
                    if ($("#pName").val()=='请选择'){
                        $("#seLe").html("<option>请选择</option>")
                    }
                    else{
                        var url='http://localhost:8080/erp/pur/bySell';
                        ajax(url,{"providerName":$("#pName").val()},providerSelect);
                    }
                })

                $("#numG").change(function () {
                    if(Number(this.val())<0){
                        this.val(0);
                    }
                })

                $("#AddTwo").click(function () {
                    if ($("#pName").val()=='请选择'){
                        alert("请选择批发商与商品")
                    }
                    else if($("#seLe").val()=='请选择'){
                        alert("请选择商品")
                    }
                    else if (Number($("#numG").val())<=0){
                        alert("选择购买数量")
                    }
                    else {
                        var url='';
                        var data={"providerName":$("#pName").val(),"goodsName":$("#seLe").val(),"num":$("#numG").val()}
                    }
                })

                $("#addBy").click(function () {

                })

                $("#seLe").change(function () {
                    if ($("#seLe").val()=='请选择'){
                        $("#purPrice").text('')
                    }
                    else {
                        var url='http://localhost:8080/erp/pur/purPrice';
                        ajax(url,{"goodsName":$("#seLe").val()},price)
                    }
                })

                //
            });


            function ajax(url,data,fun) {
                $.ajax({
                    url:url,
                    data:data,
                    type:'Post',
                    dataType:"json",
                    success:function (data) {
                        fun(data)
                    }
                })
            }

            function price(data) {
                for (var i=0;i<data.length;i++){
                    $("#purPrice").text(data[i].pur_price);
                    $("#num").text(data[i].num)
                }
                $("#numG").val("1");
            }

            function providerSelect(data) {
                var str="<option>请选择</option>";
                for(var i=0;i<data.length;i++){
                    str+="<option>"+data[i].goodsName+"</option>";
                }
                $("#seLe").html(str)
            }

            // 设置激活菜单
            function setSidebarActive(tagUri) {
                var liObj = $("#" + tagUri);
                if (liObj.length > 0) {
                    liObj.parent().parent().addClass("active");
                    liObj.addClass("active");
                }
            }

            function choose(obj){
                var ss= document.getElementsByName("ByWay");
                for (var i = 0; i < ss.length; i++) {
                    ss[i].checked = false;
                }
                obj.checked = true;
            }
        </script>


    </body>

</html>